<template>
  <div class="game">
    <Drone />
    <h2>敌对防御塔</h2>
    <div v-for="tower in enemyTowers" :key="tower.id" class="tower-container">
      <Tower :tower="tower" />
    </div>
  </div>
</template>

<script>
import Drone from '../components/DroneAgent.vue';
import Tower from '../components/TowerAgent.vue';

export default {
  components: {
    Drone,
    Tower
  },
  data() {
    return {
      enemyTowers: [
        { id: 1, name: 'Tower 1', location: '10, 20', status: '运行中' },
        // { id: 2, name: 'Tower 2', location: '30, 40', status: '运行中' },
        // 可以根据需要添加更多的防御塔对象
      ]
    };
  }
};
</script>

<style scoped>
.game {
  position: relative;
  width: 100%;
  height: 100vh;
}

.tower-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.tower-container:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
</style>
